<template>
  <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="username">
      <el-input
        v-model="form.username"
        maxlength="30"
        clearable
        :disabled="true"
      />
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input
        v-model="form.email"
        maxlength="30"
        clearable
        :disabled="true"
      />
    </el-form-item>
    <el-form-item label="手机号" prop="iphone">
      <el-input
        v-model="form.iphone"
        maxlength="30"
        clearable
      />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="form.sex">
        <el-radio :value="0">男</el-radio>
        <el-radio :value="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生地">
      <el-input
        v-model="form.address"
        placeholder="请输入出生地"
        style="width: 260px"
        clearable
      >
      </el-input>
    </el-form-item>
    <el-form-item label="出生年月" prop="birthday">
      <el-date-picker
        v-model="form.birthday"
        type="date"
        placeholder="请选择出生年月"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        style="width: 100%"
        clearable
      />
    </el-form-item>
    <el-form-item label="个人简介" prop="introduction">
      <el-input v-model="form.introduction" maxlength="50" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit(userRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits } from 'vue'
import { updatePersonalMsg } from '@/api/indivdual/userinfo'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
const emit = defineEmits()
const userRef = ref()
const props = defineProps({
  user: {
    type: Object
  }
})
const store = useStore()
const userId = store.state.app.user.id

const form = ref({
  username: '',
  email: '',
  iphone: '',
  sex: '',
  address: '',
  birthday: '',
  introduction: '',
  image_url: ''
})
const rules = ref({
  username: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change']
    }
  ]
})

/** 提交按钮 */
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updatePersonalMsg({ ...form.value, user_id: userId })
        .then((res) => {
          ElMessage.success(res.message)
          emit('update-list')
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}

watch(
  () => props.user,
  (user) => {
    if (user) {
      form.value = {
        username: user.username,
        email: user.email,
        iphone: user.phone,
        sex: user.sex,
        address: user.address,
        birthday: user.birthday,
        introduction: user.introduction
      }
    }
  },
  { immediate: true }
)
</script>
